import React from 'react'
import {Button, Form, Input, message, Radio, Tag} from 'antd'
import {fetchPost} from '../../../../../utils/request'

const FormItem = Form.Item
const {TextArea} = Input

const formItemLayout = {
  labelCol: {
    xs: {span: 10},
    sm: {span: 10}
  },
  wrapperCol: {
    xs: {span: 14},
    sm: {span: 14}
  }
}

class AddRecord extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      info: props.info,
      callingResults: [],
      relatives: [],
    }
  }

  componentDidMount() {
    this.getTagList()
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.info !== this.state.info) {
      this.setState({
        info: nextProps.info
      })
    }
  }

  getTagList() {
    fetchPost('/collection/v2/case/query', {}).then(json => {
      if (json.code === 0) {
        this.setState({
          callingResults: json.data.callingResults,
          relatives: json.data.relatives
        })
      } else {
        message.error(json.msg)
      }
    })
  }

  handleSubmit = e => {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        fetchPost('/collection/v2/phone/record/add', {
          collectionNo: this.state.info.collectionNo,
          name: this.state.info.name,
          mobile: this.state.info.mobile,
          followId: this.state.info.followId,
          followUp: this.state.info.followUp,
          ...values
        }).then(json => {
          if (json.code === 0) {
            message.info('Success')
            this.props.form.resetFields()
            this.props.onOk()
          } else {
            message.error(json.msg)
          }
        })
      }
    })
  }

  render() {
    const {getFieldDecorator} = this.props.form
    return (
      <div>
        <Form horizontal onSubmit={this.handleSubmit}>
          <h4>Name:{this.state.info.name} Mobile:{this.state.info.mobile}</h4>
          <FormItem label="Calling results">
            {getFieldDecorator('callingResult', {rules: [{required: true}]})(
              <Radio.Group>
                {
                  this.state.callingResults.map((value, index) => (
                    <Radio.Button value={value.value}>{value.name}</Radio.Button>
                  ))
                }
              </Radio.Group>
            )}
          </FormItem>
          <FormItem label="Relationship with constumer">
            {getFieldDecorator('relation', {rules: [{required: true}]})(
              <Radio.Group>
                {
                  this.state.relatives.map((value, index) => (
                    <Radio.Button value={value.value}>{value.name}</Radio.Button>
                  ))
                }
              </Radio.Group>
            )}
          </FormItem>
          <FormItem>
            {getFieldDecorator('content', {rules: [{required: true}]})(
              <TextArea rows={4} placeholder='Please enter more details about the consumer after the call'/>
            )}
          </FormItem>
          <FormItem {...formItemLayout}>
            <Button type="primary" htmlType="submit" style={{float: 'right'}}>
              Submit
            </Button>
          </FormItem>
        </Form>
      </div>
    )
  }
}

AddRecord = Form.create()(AddRecord)
export default AddRecord
